<template>
  <uni-popup v-if="showValue" ref="popup" :is-mask-click="false">
    <view class="open-content">
      <view class="open-enter-box">
        <view class="open-item-box">
          <image class="open-item-img" :src="warningImgUrl" mode="aspectFit"/>
        </view>
        <view class="checkbox-dialog-box">
          <text class="dialog-title">{{ content }}</text>
        </view>
        <view v-if="showInput" class="input-info-box">
          <uni-easyinput type="textarea" v-model="inputContent" :maxlength="100" placeholder="请输入内容"></uni-easyinput>
        </view>
        <view class="open-btm-box">
          <button class="btm-btn item-confirm-btn" @click="confirmClick">{{confirmText}}</button>
          <button v-if="showCancel" class="btm-btn item-cancel-btn" @click="cancelClick">取消</button>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import {imgHost} from "@/utils/api";

/** 警告提醒弹窗 */
export default {
  name: "OpeningUpDialog",
  props: {
    /** 是否展示弹窗 */
    showValue: {
      type: true,
      required: true,
      default: false
    },
    /** 是否展示输入框 */
    showInput: {
      type: true,
      default: false
    },
    /** 提示内容 */
    content: {
      type: String,
      default: ''
    },
    /** 确认按钮文字内容 */
    confirmText: {
      type: String,
      default: '确认',
    },
    /** 取消按钮文字内容 */
    cancelText: {
      type: String,
      default: '取消',
    },
    /** 是否展示取消按钮 */
    showCancel: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      warningImgUrl: imgHost + 'icon_dialog_warning.png',
      inputContent: ''
    }
  },
  watch: {
    showValue: {
      immediate: true,
      handler(value) {
        if (value) {
          this.$refs.popup.open('center')
        }
      }
    }
  },
  methods: {
    // 确认
    confirmClick() {
      this.$emit('confirmClick', this.inputContent)
    },
    // 关闭弹窗
    cancelClick() {
      this.$emit('cancelClick')
      this.$refs.popup.close()
    }
  }
}
</script>

<style scoped lang="scss">
.open-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .open-enter-box {
    padding: 30rpx;
    margin: 0 30rpx;
    width: 80vw;
    background: #FFFFFF;
    box-shadow: 0 6rpx 25rpx 7rpx rgba(0, 0, 0, 0.11);
    border-radius: 8rpx;
    position: relative;
    .open-item-box {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 20rpx 0;
      .open-item-img {
        width: 100rpx;
        height: 100rpx;
      }
    }
    .checkbox-dialog-box {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 20rpx;
      .dialog-title {
        font-size: 32rpx;
        font-weight: 400;
        color: #555555;
        line-height: 55rpx;
        display: inline-block;
        word-break: break-all;
      }
    }
    .input-info-box {
      margin: 10rpx 0;
    }
    .open-btm-box {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 20rpx 0;
      .btm-btn {
        margin: 0;
        min-width: 200rpx;
        height: 60rpx;
        border-radius: 30rpx;
        font-size: 30rpx;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 60rpx;
      }
      .item-confirm-btn {
        background: #E42417;
      }
      .item-cancel-btn {
        margin-left: 55rpx;
        background: #919191;
      }
    }
  }
}
</style>
